<template>
  <el-dialog :visible.sync="dialogVisible" width="80%" title="审核详情">
    <div class="workflow-dialog-content">
      <workflow-approval-form :form-data="approvalData" v-if="isUpdate" />

      <div class="workflow-dialog-divide" v-if="isUpdate" />

      <workflow-approval-form :form-data="approvalData" />
    </div>

    <div slot="footer">
      <el-button type="danger" size="mini" @click="onApproval(2)">
        拒绝
      </el-button>
      <el-button type="success" size="mini" @click="onApproval(1)">
        通过
      </el-button>
    </div>
  </el-dialog>
</template>
<script lang="js">
import WorkflowApprovalForm from '@/views/WorkflowList/components/WorkflowApprovalForm.vue';
import { WorkflowApi } from '@/api';

export default {
  components: { WorkflowApprovalForm },
  props: {
    approvalItem: {
      type: Object,
      default: function() {
        return {};
      },
    },
    approvalData: {
      type: Object,
      default: function() {
        return {};
      },
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      dialogVisible: this.visible,
    };
  },
  watch: {
    visible: function() {
      this.dialogVisible = this.visible;
    },
    dialogVisible: function() {
      this.$emit('update:visible', this.dialogVisible);
    },
  },
  computed: {
    isUpdate () {
      return this.approvalData && this.approvalData.client_info && this.approvalData.client_info.coverid;
    },
  },
  methods: {
    onApproval (status) {
      const clientListId = this.approvalData.client_info.list_id;
      const datalistListIds = this.approvalData.datalist_info.map(o => o.list_id) || [];
      const allListId = datalistListIds.concat([clientListId]);

      const title = status === 1 ? '通过' : '拒绝';
      let message = `确认${status === 1 ? '通过' : '拒绝'}改条数据的审批操作`;
      if (allListId.length > 1) {
        message += `, 并且操作关联的${allListId.length - 1}条记录?`;
      }
      this.$confirm(message, title, {
        type: status === 1 ? 'success' : 'error',
      }).then(() => {
        WorkflowApi.doBatchApproval(allListId, status).then(() => {
          this.$message.success('审核成功');
          this.$emit('approval-success');
        }).catch((e) => {
          this.$message.error('审核失败' + JSON.stringify(e));
        });
      }).catch(() => {

      });
    },
  },
};
</script>

<style scoped lang="less">
.workflow-dialog-content {
  display: flex;
}

.workflow-dialog-divide {
  flex: 0 0 1px;
  background: #eee;
  height: 100%;
}
</style>
